<template>
  <div class="image-container"
       @wheel="handleWheel"
       style="overflow: hidden;position: relative;display: flex; justify-content: center; align-items: center;">
    <img :src='imageSrc'
         alt="Draggable and Zoomable Image"
         class="zoomable-image"
         :style="imageStyle"
         @click="mouseClick"
         ref="draggableImage"
    />
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: {
      type: String,
      default: '',
    },
    resetScale: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scale: 1, // 初始缩放级别
      offsetX: 0,
      offsetY: 0,
    };
  },
  computed: {
    // 使用计算属性来生成img的样式对象
    imageStyle() {
      return {
        transform: `scale(${this.scale})translate(${this.offsetX}px, ${this.offsetY}px)`,
        transition: 'transform 0.25s ease',// 平滑过渡效果
        // 如果需要，可以添加其他样式，如maxWidth和maxHeight来限制最大尺寸
        // 但在这个例子中，我们依赖容器的大小和overflow: hidden来限制显示
      };
    },
  },
  watch: {
    resetScale(newValue, oldValue) {
      if (newValue!==oldValue){
        this.scale = 1;
      }
    }
  },
  methods: {
    handleWheel(event) {
      event.preventDefault(); // 阻止默认滚动行为

      // 根据滚轮方向调整缩放级别
      const delta = event.deltaY * -0.003; // 假设向下滚动是放大，向上滚动是缩小
      // console.log('delta',delta)
      this.scale += delta;

      // 限制缩放级别在合理范围内（可选）
      this.scale = Math.min(Math.max(0.1, this.scale), 5); // 例如，最小0.1倍，最大5倍

      // 可选：保持图片在容器中居中（由于使用了flex布局，这里可能不需要额外的逻辑）
      // 但如果需要更精细的控制，可以计算并设置img的left和top样式
    },
    mouseClick(e) {
      console.log('e', e)
    }
  },
};

</script>

<style scoped>
/* 如果需要，可以在这里添加额外的样式 */
.zoomable-image {
  /* 初始时不需要设置width和height，因为我们将通过scale来缩放 */
  max-width: 100%; /* 防止图片过大超出容器 */
  max-height: 100%; /* 同上 */
  display: block; /* 移除图片下方的默认间隙 */
}

/* 样式可以根据需要进行调整 */

.image-container img {
  /* 初始时不需要设置width和height，因为我们将通过transform来定位和缩放 */
  display: block; /* 移除图片下方的默认间隙 */
  pointer-events: all; /* 确保鼠标事件可以被触发 */
}
</style>
